<template>
    <div class="operate">
        <template>
            <div class="operate-btn">
                <div class="leftBtn">
                    <el-button type="primary" @click="review2('pass', multipleitem)">复核通过</el-button>
                    <el-button type="danger" @click="review2('refuse', multipleitem)">复核拒绝</el-button>
                </div>
                <div class="rightBtn">
                    <el-input
                        v-model="checkParamRequest.clauseTextLike"
                        size="small"
                        prefix-icon="el-icon-search"
                        placeholder="请输入条款原文"
                        style="width:230px;margin: 0 10px"
                        @input="clauseTextLikeQuery"
                    />
                    <el-button @click="clauseQueryBtn">高级查询</el-button>
                    <el-button icon="el-icon-refresh-right" @click="getIndexClauseCheckRefresh"></el-button>
                    <el-button icon="el-icon-setting" @click="layoutDialog = true"></el-button>
                </div>
            </div>
            <div style="width: 98%; height:100%; margin: 0 auto; border: 1px solid #d7d7d7;">
                <el-table
                    ref="upstreamTable"
                    :key="tableKey"
                    :data="checkList"
                    tooltip-effect="dark"
                    style="width: 100%"
                    height="580px"
                    border
                    size="mini"
                    stripe
                    @selection-change="clauseChangeEvent"
                >
                    <el-table-column type="selection" width="40" align="center"></el-table-column>
                    <el-table-column
                        v-for="(item) in showFieldList"
                        :key="item.clauseNo"
                        :prop="item.id"
                        :label="item.content"
                        :sortable="item.sortable"
                        :show-overflow-tooltip="true"
                        :width="item.width"
                    >
                        <template slot-scope="scope">
                            <span v-if="['clauseStatus'].includes(item.id)">{{scope.row.clauseStatus == true ? '启用' : '禁用'}}</span>
                            <span v-else-if="['passiveTransfinite'].includes(item.id)">{{scope.row.passiveTransfinite == true ? '是' : '否'}}</span>
                            <span v-else-if="['realTimeSupport'].includes(item.id)">{{scope.row.realTimeSupport == 1 ? '支持' : (scope.row.realTimeSupport == 2 ? '部分支持' : (scope.row.realTimeSupport == 3 ? '不支持' :''))}}</span>
                            <span v-else-if="['hdSupport'].includes(item.id)">{{scope.row.hdSupport == 1 ? '支持' : (scope.row.hdSupport == 2 ? '部分支持' : (scope.row.hdSupport == 3 ? '不支持' :''))}}</span>
                            <span v-else-if="['modifyTime', 'createTime'].includes(item.id)">{{timeFormat(scope.row[item.id]) || '--'}}</span>
                            <span v-else-if="['createUserName'].includes(item.id)">
                                <span v-if="scope.row.modifyEvent == '1'">{{scope.row.createUserName}}</span>
                                <span v-else>{{scope.row.modifyUser}}</span>
                            </span>
                            <span v-else>{{scope.row[item.id]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200" fixed="right">
                        <template slot-scope="scope">
                            <RiskIconButton
                            type="primary"
                            icon="el-icon-view"
                            topTitle="查看"
                            v-authCode="B_0191"
                            @on-click="openhandleClauseDialog(scope.row, scope.row.indexType == '1'?'外规复核查看':'产品复核查看')"
                        ></RiskIconButton>
                        <RiskIconButton
                            type="primary"
                            icon="el-icon-edit"
                            topTitle="编辑"
                            v-authCode="B_0188"
                            @on-click="openhandleClauseDialog(scope.row, scope.row.indexType == '1'?'外规复核修改':'产品复核修改')"
                        ></RiskIconButton>
                        <RiskIconButton
                            type="primary"
                            icon="el-icon-circle-check"
                            topTitle="复核通过"
                            v-authCode="B_0188"
                            @on-click="review2('pass1', [scope.row])"
                        ></RiskIconButton>
                        <RiskIconButton
                            type="danger"
                            icon="el-icon-circle-close"
                            topTitle="复核拒绝"
                            v-authCode="B_0191"
                            @on-click="review2('refuse1', [scope.row])"
                        ></RiskIconButton>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <RiskPagination :paging="groupPage"  @page-change="pageRet"></RiskPagination>
                </div> 
            </div>    
        </template>
        <template>
            <!-- 高级查询 -->
            <ReviewQueryDialog
                :checkParamRequest="checkParamRequest"
                :clauseQueryDialog="clauseQueryDialog"
                @emitClauseQuery="emitClauseQuery"
            ></ReviewQueryDialog>
            <!-- 合规条款新增弹窗 -->
            <TreatyArticleDialog
                :addTreatyDialog="addTreatyDialog"
                :sourceSettteingType="sourceSettteingType"
                :clauseCodeItem="clauseCodeItem"
                :reviewItem="reviewItem"
                @emitTreatyArticle="emitTreatyArticle"
            ></TreatyArticleDialog>
            <DeletionConfirmationDialog
                :title="delType.content"
                :delConfirmationDialog="delConfirmationDialog"
                @emitDialogVisible="emitDialogVisible"
                @emitHandleBtn="emitHandleBtn"
            >
                <div slot="content1" v-if="['pass1', 'refuse1'].includes(delType.type)">
                    <div>条款序号：{{paramList[0].clauseCode}}</div>
                    <div>条款原文：{{paramList[0].clauseText}}</div>
                </div>
                <div slot="content1" v-else>
                    条款序号：<span v-for="(item, index) in paramList" :key="index">{{item.clauseCode}}<span v-if="index!=paramList.length-1">, </span></span>
                </div>
            </DeletionConfirmationDialog>
            <RiskTableLayout
                title="页面布局"
                :visible.sync="layoutDialog"
                :field-list="tableColumns"
                :selected-field-list="selectedFieldList"
                :fixed-field-list="fixedFieldList"
                table-name="CLAUSE_REVIEW"
                @on-submit="onSubmit"
            />
        </template>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import RiskPagination from '@/common/components/risk-pagination.vue';
import TreatyArticleDialog from './components/treaty-article-dialog.vue';
import ReviewQueryDialog from './components/review-query-dialog.vue'
import RiskTableLayout from '@/common/components/risk-table-layout.vue';
import DeletionConfirmationDialog from './commom/deletion-confirmation-dialog.vue'
import { getTableLayout } from '@/common/api/commonApi';
import Invest from '@/common/dict/invest';
import { dateFormat, timeFormat } from '@/utils/tools';

export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}

@Component({
    name: 'ClauseReview',
    components: {
        RiskIconButton,
        RiskPagination,
        TreatyArticleDialog,
        ReviewQueryDialog,
        RiskTableLayout,
        DeletionConfirmationDialog
    },
})
export default class ClauseReview extends Vue {
    @Prop() editableTabsValue;
    Invest: any = new Invest();
    timeFormat = timeFormat;
    addTreatyDialog: boolean = false;
    clauseQueryDialog: boolean = false; // 高级查询窗口显示
    delConfirmationDialog: boolean = false;
    sourceSettteingType: string = ''; // 条款设置弹窗类型
    timeout = null; // 防抖
    checkList = []; // table 数据
    multipleitem = []; // 多选
    clauseCodeItem = ''; // 条款操作行clauseCode
    reviewItem = {}; // 条款操作行数据
    delContent: string = '';
    checkParamRequest = { // table页查询参数
        clauseTextLike: '', // 模糊查询
        clauseCode: '', // 条款序号
        clauseStatus: '', // 条款状态
        clauseText: '', // 条款原文
        indexSourceName: '', // 来源名称
        versionNumber: '', // 版本号
        // sourceType: '', // 来源类型
        realTimeSupport: '', // 风控系统是否支持
        hdSupport: '', // 恒生系统能否支持
        paging: {
            currentPage: 1,
            pageSize: 50
        },
    }
    layoutDialog: boolean = false; // 布局显示值
    showFieldList: any[] = []; // 要显示的表格列
    // 已选择字段列表
    selectedFieldList: any[] = [];
    fixedFieldList: any[] = [
        { content: '序号', id: 'clauseCode', sortable: true },
        { content: '条款原文', id: 'clauseText', sortable: true, width: 180 },
    ];
    iconDom: any = null;
    tableKey: number = 0;
    calcLoading: boolean = false;
    entryTypeArr: any[] = []; // 风险类型
    private groupPage: pages = {
        currentPage: 1,
        pageSize: 50,
        total: 0,
    };
    // 全部表格列
    tableColumns: any[] = [
        { content: '序号', id: 'clauseCode', sortable: true },
        { content: '条款原文', id: 'clauseText', sortable: true },
        { content: '执行标准', id: 'executiveStandard', sortable: false },
        { content: '是否可被动超限', id: 'passiveTransfinite', sortable: false, width: 160 },
        { content: '条款适用产品', id: 'suitableFundType', sortable: false, width: 160 },
        { content: '风控系统能否支持', id: 'realTimeSupport', sortable: false, width: 180 },
        { content: '恒生系统能否支持', id: 'hdSupport', sortable: false, width: 180 },
        { content: '条款状态', id: 'clauseStatus', sortable: false },
        { content: '新增时间', id: 'createTime', sortable: false },
        { content: '修改时间', id: 'modifyTime', sortable: false },
        { content: '修改人', id: 'createUserName', sortable: false },
    ];
    delType = {
        type: '',
        content: ''
    }; // 删除类型
    paramList = [];

    created() {
        this.getIndexClauseCheck()
    }
    mounted() {
        this.entryTypeArr = this.objToArr(this.Invest.entryType);
        this.queryLayout();
    }
    @Watch('editableTabsValue', { immediate: true, deep: true })
    watchEditableTabsValue(val) {
        if (this.editableTabsValue === '复核') {
            this.getIndexClauseCheckRefresh();
        }
    }
    // 条款复核列表查询
    getIndexClauseCheck() {
        this.$axios.post('/indexClause/list/check', this.checkParamRequest).then((res: any) => {
            if (res) {
                this.checkList = [];
                res.list.forEach(item => this.checkList.push(item));
                this.groupPage.total = res.total;
            }
            this.clauseQueryDialog = false;
        });
    }
    // 刷新数据
    getIndexClauseCheckRefresh() {
        this.getIndexClauseCheck();
    }
    review2(param1, param2) {
        if (this.multipleitem.length == 0 && (param1 == 'pass' || param1 == 'refuse')) {
            this.yh_message_warn('选择条款不可为空!');
            return
        }
        this.delConfirmationDialog = true;
        this.paramList = [];
        if (param1 == 'pass' || param1 == 'pass1') {
            this.delType.type = param1
            this.delType.content = '确定复核通过以下条款吗？';
        } else if (param1 == 'refuse' || param1 == 'refuse1') {
            this.delType.type = param1
            this.delType.content = '确定复核拒绝以下条款吗？';   
        }
        if (param1 == 'pass' || param1 == 'refuse') {
            this.paramList = this.multipleitem
        } else if (param1 == 'pass1' || param1 == 'refuse1') {
            this.paramList = param2;
        }
    }
    // 删除确认窗口显示
    emitDialogVisible(param) {
        this.delConfirmationDialog = param;
    }
    // 删除确认窗口
    emitHandleBtn() {
        if (this.delType.type == 'pass' || this.delType.type == 'pass1') {
            this.$axios.post('/indexClause/check/pass', this.paramList).then((res: any) => {
                this.yh_message_success('通过复核成功!');
                this.delConfirmationDialog = false;
                this.getIndexClauseCheck()
            });    
        } else if (this.delType.type == 'refuse' || this.delType.type == 'refuse1') {
            this.$axios.post('/indexClause/check/refuse', this.paramList).then((res: any) => {
                this.yh_message_success('拒绝复核成功!');
                this.delConfirmationDialog = false;
                this.getIndexClauseCheck()
            });
        }
    }
    // 条款原文模糊搜索
    clauseTextLikeQuery(param) {
        this.debounce(this.fuzzyQuery, 500)
    }
    fuzzyQuery() {
        this.getIndexClauseCheck();
    }
    clauseQueryBtn() {
        this.clauseQueryDialog = true;
    }
    // 编辑条款
    openhandleClauseDialog(scope, type) {
        this.addTreatyDialog = true;
        this.sourceSettteingType = type;
        this.clauseCodeItem = scope.clauseCode;
        this.reviewItem = scope;
    }
    // 高级查询弹窗emit
    emitClauseQuery(param1, param2) {
        if (param2 == '') {
            this.clauseQueryDialog = param1;
        } else if (param2 != '') {
            this.checkParamRequest.clauseCode = param2.clauseCode; // 条款序号
            this.checkParamRequest.clauseStatus = param2.clauseStatus; // 条款状态
            this.checkParamRequest.clauseText = param2.clauseText; // 条款原文
            this.checkParamRequest.versionNumber = param2.versionNumber; // 版本号
            this.checkParamRequest.indexSourceName = param2.indexSourceName; // 来源名称
            // this.checkParamRequest.sourceType = param2.sourceType; // 来源类型
            this.checkParamRequest.realTimeSupport = param2.realTimeSupport; // 风控系统是否支持
            this.checkParamRequest.hdSupport = param2.hdSupport; // 恒生系统能否支持
            this.getIndexClauseCheck();
        }
    }
    // 多选
    clauseChangeEvent(checked, row, rowIndex) {
        this.multipleitem = [];
        checked.forEach(item => this.multipleitem.push(item))
    }
    // 合约条款新增弹窗emit
    emitTreatyArticle(param1, param2) {
        this.addTreatyDialog = param1;
    }
    // 分页
    private pageRet(): void {
        this.checkParamRequest.paging.currentPage = this.groupPage.currentPage;
        this.checkParamRequest.paging.pageSize = this.groupPage.pageSize;
        this.getIndexClauseCheck();
    }
    // 防抖
    debounce(fun, time = 500) {
        if (this.timeout) {
            clearTimeout(this.timeout)
        }
        this.timeout = setTimeout(() => {
            fun()
        }, time);
    }
    getRowKeys(row) {
        return row.changeNo;
    }
    /**
     * 提交成功后回调
     * @param {Object} 回调数据
     */
    async onSubmit(data) {
        await this.queryLayout();
    }
        /* **************************** 布局设置start ***************************** */
    // 获取页面布局信息
    async queryLayout() {
        this.calcLoading = true;
        const resList: any = await new Promise((resolve, reject) => {
            getTableLayout('CLAUSE_REVIEW')
                .then((res: any) => {
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        });
        if (resList) {
            this.selectedFieldList = JSON.parse(resList);
            this.showFieldList = this.fixedFieldList.concat(this.selectedFieldList);
            this.calcLoading = false;
        } else {
            this.showFieldList = this.tableColumns;
            this.selectedFieldList = this.tableColumns;
            this.calcLoading = false;
        }
        // 重新渲染表格
        this.tableKey++;
        this.changeTable();
    }
    changeTable() {
        const _this = this;
        this.$nextTick(() => {
            let iconDom = (_this.$refs['upstreamTable'] as any).$el.querySelectorAll('.vxe-icon--funnel');
            for (let i:any = 0; i < iconDom.length; i++) {
                if (['规则说明'].includes(iconDom[i].parentNode.parentNode.children[0].innerHTML)) {
                    iconDom[i].className = 'vxe-filter--btn el-icon-search';
                }
            }
        });
    }
    // 转表格筛选下拉框数据
    objToArr(param) {
        const list = [];
        for (const key in param) {
            list.push({ label: param[key], value: key });
        }
        return list;
    }
}
</script>
<style lang="scss" scoped>
.operate {
    .operate-btn {
        width: 98%;
        display: flex;
        margin: 10px auto;
    }
}
.fixed-right--wrapper {
    width: auto !important;
}
.vxe-table--render-default .fixed--hidden {
    visibility: visible !important;
}
</style>
